<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!--数据列表-->
<table class="layui-table" lay-data="{ url:'admin/list', page:true, id:'datalist',toolbar:'#toptools'}" lay-filter="datalist">
    <thead>
    <tr>
        <th lay-data="{field:'adminid'}">ID</th>
        <th lay-data="{field:'adminname'}">用户名称</th>
        <th lay-data="{field:'imgurl'}">头像</th>

        <th lay-data="{toolbar:'#linetools'}">操作</th>
    </tr>
    </thead>
</table>

<!--新增数据表单-->
<div style="display:none" id="addWin" lay-filter="addWin" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="adminname" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
            <input type="text" name="tel" required lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-inline">
            <img src="easyfile/upload.jpeg" id="addupload" style="width: 100px;height: 100px;cursor:pointer">
            <input type="hidden" name="imgurl" required lay-verify="required">
        </div>
    </div>

    <div class="layui-form-item">
        <button type="button" class="layui-btn-warm" id="addsave">保存</button>
        <button type="button" class="layui-btn-warm" id="addcancel">取消</button>
    </div>
</div>

<!--编辑数据表单-->
<div style="display:none" id="editWin" lay-filter="editWin" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="adminname" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
            <input type="text" name="tel" required lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-inline">
            <img src="easyfile/upload.jpeg" id="editupload" style="width: 100px;height: 100px;cursor:pointer">
            <input type="hidden" name="imgurl" required lay-verify="required">
        </div>
    </div>

    <div class="layui-form-item">
        <button type="button" class="layui-btn-warm" id="editsave">保存</button>
        <button type="button" class="layui-btn-warm" id="editcancel">取消</button>
    </div>
</div>

<!--行内工具栏-->
<script id="linetools" type="text/html">
    <button type="button" class="layui-btn-danger" lay-event="edit">编辑</button>
    <button type="button" class="layui-btn-danger" lay-event="delete">删除</button>
</script>

<!--头部工具栏-->
<script id="toptools" type="text/html">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="text" name="text" placeholder="请输入查询内容" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" lay-event="check">查询</button>
            <button type="button" class="layui-btn" lay-event="add">新增</button>
        </div>
    </div>
</script>

<script src="layui/layui.all.js"></script>

<script>
    const $ = layui.$;
    const table = layui.table;
    const form = layui.form;
    const layer = layui.layer;
    const upload = layui.upload;

    /*行内按钮点击事件*/
    table.on("tool(datalist)", function (obj) {
        let event = obj.event;
        let data = obj.data;
        if (event == "delete") {
            layer.confirm("确认要删除吗", function () {
                $.ajax({
                    url: 'user/delete',
                    data: { id: data.adminid },
                    success: function () {
                        layer.msg("删除成功", { time: 1800, icon: 1 });
                        table.reload("datalist");
                    }
                });
            });
        } else if (event == "edit") {
            // 将当前行的数据填充到编辑表单
            form.val("editWin", data);
            $("#editupload").attr("src", data.imgurl);
            // 打开编辑表单
            layer.open({
                type: 1,
                title: '编辑用户',
                area: ['400px', '400px'],
                content: $("#editWin")
            });
        }
    });
    /*头部工具栏点击事件*/
    let currentData = null; // 定义一个全局变量，用于保存当前行的数据

    table.on("tool(datalist)", function (obj) {
        let event = obj.event;
        let data = obj.data;
        if (event == "delete") {
            layer.confirm("确认要删除吗", function () {
                $.ajax({
                    url: 'user/delete',
                    data: { id: data.adminid },
                    success: function () {
                        layer.msg("删除成功", { time: 1800, icon: 1 });
                        table.reload("datalist");
                    }
                });
            });
        } else if (event == "edit") {
            // 将当前行的数据保存到全局变量
            currentData = data;
            // 将当前行的数据填充到编辑表单
            form.val("editWin", data);
            $("#editupload").attr("src", data.imgurl);
            // 打开编辑表单
            layer.open({
                type: 1,
                title: '编辑用户',
                area: ['400px', '400px'],
                content: $("#editWin")
            });
        }
    });

    // 编辑保存按钮的点击事件
    $("#editsave").on("click", function () {
        let formData = form.val("editWin"); // 获取表单数据
        formData.adminid = currentData.adminid; // 使用全局变量中的 adminid
        $.ajax({
            url: 'user/edit',
            type: 'POST',
            data: formData,
            success: function () {
                layer.msg("编辑成功", { time: 1800, icon: 1 });
                table.reload("datalist");
                layer.closeAll();
            }
        });
    });

    /*新增表单取消按钮点击事件*/
    $("#addcancel").on("click", function () {
        layer.closeAll();
    });

    /*编辑表单取消按钮点击事件*/
    $("#editcancel").on("click", function () {
        layer.closeAll();
    });

    /*上传图片*/
    upload.render({
        elem: "#addupload",
        url: "file/upload",
        done: function (result) {
            let url = result.data[0].src;
            $("#addupload").attr("src", url);
            $("input[name='imgurl']").val(url);
        },
        error: function () {
            layer.msg("上传失败", { icon: 2 });
        }
    });

    upload.render({
        elem: "#editupload",
        url: "file/upload",
        done: function (result) {
            let url = result.data[0].src;
            $("#editupload").attr("src", url);
            $("input[name='imgurl']").val(url);
        },
        error: function () {
            layer.msg("上传失败", { icon: 2 });
        }
    });
</script>
</body>
</html>